<template>
<div class="subScribe-box">
  <div class="subScribe-header">
    文章列表
  </div>
<div id="wrap">
   <scroll ref="scroll"
              :data="items"
              :scrollbar="scrollbarObj"
              :pullDownRefresh="pullDownRefreshObj"
              :pullUpLoad="pullUpLoadObj"
              :startY="parseInt(startY)"
              @pullingDown="onPullingDown"
              @pullingUp="onPullingUp"
              @click="clickItem"
      >
      <ul class="list-content">
            <li @click="clickItem($event,item)" class="list-item" v-for="(item,index) in items" :key="index">
              <div class="list-item-left">
                <img :src='item.img' alt="">
              </div>
              <div class="list-item-right">
                <p>{{item.title}}</p>
              <div>{{item.content}} <span>{{item.author?item.author:'-'}}</span> </div>
              </div>
              </li>
          </ul>
      </scroll>
</div>
</div>
</template>
<script>
import Vue from "vue";
import Scroll from "@/components/scroll/scroll.vue";
export default {
  components: { Scroll },
  created() {
    for (let i = 0; i < 2; i++) {
      this.items.push({
        title: "title",
        content: "文章内容哦",
        img:
          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2413045416,3916296131&fm=27&gp=0.jpg"
      });
    }
    console.log(this.items);
  },
  watch: {
    scrollbarObj: {
      handler() {
        this.rebuildScroll();
      },
      deep: true
    },
    pullDownRefreshObj: {
      handler(val) {
        const scroll = this.$refs.scroll.scroll;
        if (val) {
          scroll.openPullDown();
        } else {
          scroll.closePullDown();
        }
      },
      deep: true
    },
    pullUpLoadObj: {
      handler(val) {
        const scroll = this.$refs.scroll.scroll;
        if (val) {
          scroll.openPullUp();
        } else {
          scroll.closePullUp();
        }
      },
      deep: true
    },
    startY() {
      this.rebuildScroll();
    }
  },
  computed: {
    scrollbarObj: function() {
      return this.scrollbar ? { fade: this.scrollbarFade } : false;
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            stop: parseInt(this.pullDownRefreshStop),
            txt: "刷新完成"
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  data() {
    return {
      scrollbar: true,
      scrollbarFade: true,
      pullDownRefresh: true,
      pullDownRefreshThreshold: 90,
      pullDownRefreshStop: 40,
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "上拉加载更多",
      pullUpLoadNoMoreTxt: "没有数据了，别滑了！！！",
      startY: 0,
      scrollToX: 0,
      scrollToY: -200,
      scrollToTime: 700,
      scrollToEasing: "bounce",
      scrollToEasingOptions: ["bounce", "swipe", "swipeBounce"],
      items: [],
      itemIndex: 0
    };
  },
  methods: {
    //下拉刷新
    onPullingDown() {
      // 模拟更新数据
      console.log("pulling down and load data");
      setTimeout(() => {
        if (this._isDestroyed) {
          return;
        }
        //刷新
        this.$refs.scroll.forceUpdate();
      }, 1000);
    },
    clickItem() {
      // this.$router.back();
    },
    //上拉加载
    onPullingUp() {
      // 更新数据
      console.log("pulling up and load data");
      setTimeout(() => {
        if (this._isDestroyed) {
          return;
        }
        if (Math.random() > 0.1) {
          // 如果有新数据
          let newPage = [];
          for (let i = 0; i < 5; i++) {
            newPage.push({
              title: "title",
              content: "文章内容哦",
              img:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2413045416,3916296131&fm=27&gp=0.jpg"
            });
          }

          this.items = this.items.concat(newPage);
        } else {
          // 如果没有新数据
          this.$refs.scroll.forceUpdate();
        }
      }, 1500);
    },
    rebuildScroll() {
      Vue.nextTick(() => {
        this.$refs.scroll.destroy();
        this.$refs.scroll.initScroll();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.subScribe-box {
  height: 100%;
}
#wrap {
  height: 100%;
  padding-bottom: 195px;
}
.subScribe-header {
  width: 100%;
  font-size: 34px;
  color: #333;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
</style>
